<template>
  <div class="container">
    <div class="header">
      <van-icon
        @click="goBack"
        name="arrow-left"
        class="header-left"
        size="30"
      ></van-icon>
      <span> 填写服务订单</span>
    </div>
    <status-bar item="0"></status-bar>
    <van-cell class="cell">
      <template #title>
        <van-image
          :src="createInfo.service.serviceImg"
          width="25"
          height="25"
        ></van-image>
        <span class="server-name">{{ createInfo.service.serviceName }}</span>
      </template>
      <template #default>
        <div class="service-text">服务内容</div>
      </template>
    </van-cell>
    <van-cell-group class="cell">
      <van-cell>
        <template #title> 就诊医院 </template>
        <template #default>
          <div @click="showHospital = true">
            {{ form.hospital_name || "请选择就诊医院" }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title> 就诊时间 </template>
        <template #default>
          <div @click="showTime = true">
            {{ currentDate || "请选择就诊时间" }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title> 陪诊师 </template>
        <template #default>
          <div @click="showCompanion = true">
            {{ CompanionlName || "请选择陪诊师" }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>接送地址</template>
        <template #default>
          <van-field
            v-model="form.receiveAddress"
            placeholder="请填写接送地址"
            class="text"
            input-align="right"
          ></van-field>
        </template>
      </van-cell>
      <van-cell>
        <template #title>联系电话</template>
        <template #default>
          <van-field
            v-model="form.tel"
            placeholder="请填联系电话"
            class="text"
            input-align="right"
          ></van-field>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group title="服务需求" class="cell">
      <van-field
        v-model="form.demand"
        placeholder="请简单描述你要就诊的科室..."
        class="text"
        style="height: 100px"
      ></van-field>
    </van-cell-group>
    <van-button @click="submit" class="sumbit" type="primary" size="large"
      >提交订单</van-button
    >
    <!-- 就诊医院弹出层 -->
    <van-popup v-model:show="showHospital" position="bottom" :style="{ height: '30%' }">
      <van-picker
        :columns="showHospitalColumns"
        @confirm="showHospitalfirm"
        @cancel="showHospital = false"
      />
    </van-popup>
    <!-- 就诊时间弹出层 -->
    <van-popup v-model:show="showTime" position="bottom" :style="{ height: '30%' }">
      <van-date-picker
        title="选择日期"
        :min-date="minDate"
        @confirm="showTimefirm"
        @cancel="showTime = false"
      />
    </van-popup>
    <!-- 选择陪诊师 -->
    <van-popup v-model:show="showCompanion" position="bottom" :style="{ height: '30%' }">
      <van-picker
        :columns="showCompanionlColumns"
        @confirm="showCompanionfirm"
        @cancel="showCompanion = false"
      />
    </van-popup>
    <!-- 支付二维码 -->
    <van-dialog v-model:show="show" :show-confirm-button="false">
      <van-icon name="cross" class="close" @click="closeCode"></van-icon>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="codeImg"></van-image>
      <div>请使用本人微信扫码</div>
    </van-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
import statusBar from "../../components/statusBar.vue";
import { h5Companion, createOrder } from "../../api/createOrder";
import { showNotify } from "vant";
import Qrcode from "qrcode";
// 点击返回
const router = useRouter();
const goBack = () => {
  router.go(-1);
};
// 初始化数据
const createInfo = reactive({
  companion: [],
  hospitals: [],
  service: {},
});
// 陪护师列表接口
onMounted(() => {
  h5Companion().then(({ data }) => {
    // 将接口数据赋值给createInfo
    Object.assign(createInfo, data.data);
  });
});
// form表单初始化
const form = reactive({});

// 就诊医院弹出层
const showHospital = ref(false);
const showHospitalColumns = computed(() => {
  return createInfo.hospitals.map((item) => {
    return { text: item.name, value: item.id };
  });
});
// 选择就诊医院
const showHospitalfirm = (item) => {
  form.hospital_id = item.selectedOptions[0].value;
  form.hospital_name = item.selectedOptions[0].text;
  // 点击确定关闭弹出层
  showHospital.value = false;
};
// 选择就诊时间
const showTime = ref(false);
const currentDate = ref();
const minDate = ref(new Date());
const showTimefirm = (item) => {
  const dateStr = item.selectedValues.join("-");
  form.starttime = new Date(dateStr).getTime();
  currentDate.value = dateStr;
  showTime.value = false;
};
// 选择陪诊师
const showCompanion = ref(false);
const CompanionlName = ref();
const showCompanionfirm = (item) => {
  form.companion_id = item.selectedOptions[0].value;
  CompanionlName.value = item.selectedOptions[0].text;
  showCompanion.value = false;
};

const showCompanionlColumns = computed(() => {
  return createInfo.companion.map((item) => {
    return { text: item.name, value: item.id };
  });
});
// 提交表单
const submit = () => {
  const params = [
    "hospital_id",
    "hospital_name",
    "demand",
    "companion_id",
    "receiveAddress",
    "tel",
    "starttime",
  ];
  for (const i of params) {
    if (!form[i]) {
      showNotify({ message: "请把每项数据填写完整" });
      return;
    }
  }

  // 将微信支付地址转为二维码
  createOrder(form).then(({ data }) => {
    Qrcode.toDataURL(data.data.wx_code).then((url) => {
      show.value = true;
      codeImg.value = url;
    });
  });
};
// 支付弹窗
const show = ref(false);
const codeImg = ref("");
const closeCode = () => {
  show.value = false;
  router.push("/order");
};
</script>
<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
  .dv {
    font-size: 25px;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }
  .server-name {
    margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  // bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
.subBtn {
  width: 95%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
